<template>
    <el-dialog title="文件预览" :visible.sync="lookFile" destroy-on-close>
      <div :style="{ height: '600px', minHeight: '500px', margin: '8px 0px' }">
        <iframe id="pictureId" :src="url" frameborder="0" style="width: 100%; height: 100%"></iframe>
      </div>
    </el-dialog>
  </template>
  <script>
  export default {
    name: "previewDialog",
    props: ["res"],
    data() {
      return {
        url: "",
        lookFile: false,
      };
    },
    computed: {
      getFile() {
        return this.res;
      },
    },
    watch: {
      getFile(val) {
        console.log(val);
        let v = this;
        let reader = new window.FileReader();
        reader.readAsArrayBuffer(val);
        reader.onload = function (e) {
          const result = e.target.result;
          const blob = new Blob([result], { type: val.type });
          if (window.createObjectURL != undefined) {
            // basic
            v.url = window.createObjectURL(blob) + "#toolbar=0";
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            try {
              v.url = window.webkitURL.createObjectURL(blob) + "#toolbar=0";
            } catch (error){console.log(1);}
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            try {
              v.url = window.URL.createObjectURL(blob) + "#toolbar=0";
            } catch (error) {console.log(1);}
          }
        };
        if (val.type != "application/json") {
          this.lookFile = true;
        } else {
          this.$message.error("不支持zip格式与rar格式预览功能，请使用下载功能");
        }
      },
    },
  };
  </script>
  